<template>
    <div>
        <ul v-for="blog in blogList">
            <li class="blog">
                <h3>
                    <a href="#" @click.prevent="goToDetail(blog.id)">
                        {{blog.title}}
                    </a>
                </h3>
                <span>
                    {{blog.updateTime | formatDate}}
                </span>
            </li>
        </ul>
    </div>
</template>

<script>

    import tagApi from "@/api/tag"

    export default {
        name: "BlogTagList",
        data() {
            return {
                blogList: []
            }
        },

        created() {
            this.getBlogList(this.$route.params.id);
        },

        methods: {
            getBlogList: function (id) {
                tagApi.getTagBlogList(id).then(response => {
                    const resp = response.data;
                    this.blogList = resp.data;
                })
            },

            goToDetail: function (id) {
                this.$router.push("/index/blog-detail/" + id);
            }
        },

        filters: {
            formatDate: function (val) {
                let time = new Date(val);
                let yyyy = time.getFullYear();
                let MM = time.getMonth() + 1;
                let dd = time.getDate();
                return yyyy + "-" + MM + "-" + dd;
            }
        },
    }
</script>

<style scoped>


    li.blog {
        margin-top: 40px;
    }

    li.blog a {
        text-decoration: none;
        color: #333;
    }

</style>
